<template>
  <Card dis-hover :bordered="bordered" class="question-card" :class="{ hasExtra: $slots.extra }">
    <div slot="title" class="flex">
      <span v-if="question.description" class="flex-none tag-title">{{
        question.modeCode | modeFilter
      }}</span>
      <span
        class="html-ellipsis text-ellipsis pointer question-name"
        v-if="question.modeCode != 4"
        v-text="question.description"
        @click="showDescModal(question.description, question.modeCode)"
      ></span>
      <span
        v-html="parseDescription(question)"
        v-if="question.modeCode == 4"
        class="question-name"
      ></span>
      <span v-if="!question.description" style="color: rgb(230, 120, 120)">此题目已被删除</span>
      <a class="question-action flex-none">
        <slot name="action" :question="question"> </slot>
      </a>
    </div>
    <template v-if="question.modeCode === 1 || question.modeCode === 2">
      <!-- :style="{ color: item.isRight ? 'var(--right-answer)' : '' }" -->
      <p
        v-for="(item, index) in question.answers"
        :key="index"
        class="question-answer"
        :class="{
          'right-answer': item.isRight
        }"
      >
        <!-- <span>[{{ filterIndex(index + 1 || item.no) }}]</span> -->
        <span>{{ escape2Html(getAnswerDes(item, index), true) }}</span>
      </p>
      <Divider style="margin: 6px 0;" />
    </template>
    <template v-if="question.modeCode === 3">
      <p
        class="question-answer"
        :class="{
          'right-answer': question.answers[0].isRight
        }"
      >
        <span>[{{ filterIndex(1) }}]</span> 正确
      </p>
      <p
        class="question-answer"
        :class="{
          'right-answer': !question.answers[0].isRight
        }"
      >
        <span>[{{ filterIndex(2) }}]</span> 错误
      </p>
      <Divider style="margin: 6px 0;" />
    </template>
    <p v-if="question.modeCode === 5">
      {{ question.answers[0].description }}
    </p>
    <p class="question-explanation">
      解析：<span v-if="question.explanation">{{ escape2Html(question.explanation, true) }}</span
      ><span v-else>暂无解析</span>
    </p>
    <Modal v-model="desModal.show" title="题目名称" footer-hide class-name="fix-height-modal">
      <p v-if="desModal.modeCode === 4" v-html="desModal.description" class="description"></p>
      <p v-else v-text="desModal.description" class="description"></p>
    </Modal>
  </Card>
</template>
<script>
import common from './components/mixin'
export default {
  name: 'QuestionCard',
  mixins: [common],
  props: {
    question: {
      type: Object
      // validator(value) {
      //     return value ? value.modeCode && value.description && value.answers : true;
      // }
    },
    bordered: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    parseDescription(question, index) {
      if (!question.answers) {
        return
      }
      let description = question.name || question.description
      description = description.replace(
        /\{\{.*?\}\}/g,
        `<span class='quesBlank right-answer'>${question.answers[0].explanation}</span>`
      )
      let el = document.createElement('div')
      el.innerHTML = description
      return el.innerHTML
    }
  }
}
</script>
<style scoped>
.question-card {
  /* color: var(--default-color); */
}
.question-name {
  flex: auto;
  display: inline;
  word-break: break-all;
}
.question-answer {
  word-break: break-all;
  margin-bottom: 10px;
}
.question-explanation {
  color: var(--red-color);
  font-size: 12px;
  word-break: break-all;
}
.question-card .question-answer.right-answer,
.question-card .question-answer.right-answer > * {
  color: var(--answer-right) !important;
}
.flex-none {
  flex: none;
}
.question-card .question-action {
  margin-left: auto;
}
/* .question-card .html-ellipsis {
  display: inline-block;
} */
.pointer {
  cursor: pointer;
}
.question-card .html-ellipsis,
.question-card .html-ellipsis * {
  color: var(--url-color) !important;
  font-size: 14px;
}
</style>
<style>
.question-card .question-name p {
  white-space: normal;
}
.question-card .question-name * {
  word-break: break-all;
}
.quesBlank {
  padding: 0px 5px;
  outline: none;
  box-shadow: none;
  border: none;
  background: transparent;
  color: var(--answer-right);
  vertical-align: baseline !important;
  border-bottom: 1px solid var(--divider-color);
}

.question-card .question-name .ivu-card-head-inner,
.question-card .ivu-card-head .question-name p {
  display: inline-block;
  width: 100%;
  height: auto;
  font-size: 14px;
  color: var(--url-color) !important;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}
.question-card .ivu-card-head .question-name p img {
  height: 30px;
  object-fit: cover;
}
.tag-title {
  color: #2f70ff !important;
  border: 1px solid rgb(47, 112, 255);
  border-radius: 4px;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
}
</style>
